.Box{
    width: 1200px;
    min-height: 500px;
    margin-left: auto;
    margin-right: auto;
    /* background: #3cf; */
    display: flex;
    justify-content: space-between;
}
/* 左边部分 */
.left{
    width:550px ;
    background: rgba(226, 92, 20, 0.229);
}
/* 左边头部标题 */
.leftTop{
    width: 550px;
    height: 100px;
    background: url(../img/topBg.png);
    /* background-size: cover; */
    text-align: center;
}
.leftTop>h1{
    padding-top: 25px;
    color: #ec6809;
}
/* banner轮播 */
.showImg{
	position: relative;
	width: 550px;
	height: 380px;
	margin: 20px auto;
	overflow: hidden;
}
/* 轮播图片 */
.showImg img{
	width: 100%;
	height: 100%;
}

/* 箭头图标 */
.iconDiv{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border: 1px solid #666;
	border-radius: 15px;
	background-color: rgba(239, 142, 204, 0.2);
	line-height: 30px;
	text-align: center;
	font-size: 25px;
	cursor: pointer;
}
.iconDiv:hover{
	background-color: rgb(254, 71, 93);
}
/* 左按钮 */
.icon-left{
	left: 10px;
    color: rgb(246, 249, 250);
    text-align: center;
}
.icon-shangyiye,
.icon-xiayiye{
    font-size: 25px;
    font-weight: bold;
}
/* 右按钮 */
.icon-right{
	right: 10px;
    color: rgb(246, 249, 250);
    text-align: center;
}

/* 控制圆点 */
.banner-circle{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 20px;
}
.banner-circle ul{
	margin: 0 50px;
	height: 100%;
	text-align: right;
}
.banner-circle ul li{
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 5px;
	border-radius: 7px;
	background-color: rgba(252, 251, 251, 0.8);
	cursor: pointer;
}
.active{
	background-color: rgb(241, 136, 7) !important; 
}
/* 右边部分 */
.right{
  position: relative;
  width: 630px;
  background: rgba(254, 245, 219, 0.452);
}
.rightTop{
  text-align: center;
  color: rgb(209, 121, 6);
}
.task{
  width: 630px;
  height: 80px;
  /* background: #3cf; */
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  border-top: 1px dashed rgb(247, 128, 92);
  border-bottom: 1px dashed rgb(247, 128, 92);
}
.myTask{
  width: 160px;
  height: 50px;
  margin-top: 12px;
  border: 1px rgb(255, 51, 51) solid;
  border-radius: 15px;
  background: rgb(249, 187, 71);
    
}
.myTask>a{
  color: #fcfafa;
  font-size: 20px;
  text-align: center;
  display: block;
  padding-top: 10px;
}
.myTask>a:hover{
    color: rgb(248, 91, 7);
}
.plan{
  display: flex;
  text-align: center;
  justify-content: space-around;
  /* align-items: center; */
}
.myTask>a>strong{
  color: rgb(13, 61, 237);
}
.icon-jia{
  font-size: 30px;
  color: rgb(245, 246, 246);
  text-align: center;
  padding-top: 10px;
  cursor: pointer;
}
.icon-jia:hover{
  color: rgb(255, 122, 51);
}
.selectAll{
  display: flex;
  margin-top: 5px;
}
.select{
  width: 30px;
  height: 30px;
  margin-left: 10px;
  border: none;
} 
.all{
  font-size: 25px;
  padding-left: 15px;
}
.todo-list{
  background: #cdcdcd;
  margin-top: 10px;
}
.todo-list li {
  position: relative;
  font-size: 24px;
  border-bottom: 1px solid #ededed;
}
  
.todo-list li:last-child {
  border-bottom: none;
}
  
.todo-list li.editing {
  border-bottom: none;
  padding: 0;
}
  
.todo-list li.editing .edit {
  display: block;
  width: calc(100% - 43px);
  padding: 12px 16px;
  margin: 0 0 0 43px;
}
  
.todo-list li.editing .view {
  display: none;
}
  
.todo-list li .toggle {
  text-align: center;
  width: 40px;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: none; 
  -webkit-appearance: none;
  appearance: none;
}
  
.todo-list li .toggle {
  opacity: 0;
}
  
.todo-list li .toggle + label {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center left;
}
  
.todo-list li .toggle:checked + label {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
}
  
.todo-list li label {
  word-break: break-all;
  padding: 15px 15px 15px 60px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
  font-weight: 400;
  color: #4d4d4d;
}
  
.todo-list li.completed label {
  color: #cdcdcd;
  text-decoration: line-through;
}
  
.todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: auto 0;
  font-size: 30px;
  color: #cc9a9a;
  margin-bottom: 11px;
  transition: color 0.2s ease-out;
}
  
.todo-list li .destroy:hover {
  color: #af5b5e;
}
  
.todo-list li .destroy:after {
  content: "×";
}
  
.todo-list li:hover .destroy {
  display: block;
}
  
.todo-list li .edit {
  display: none;
}
  
.todo-list li.editing:last-child {
  margin-bottom: -1px;
}
.mask{
  width: 630px;
  min-height: 240px;
  position:fixed;
  background: #666;
  opacity: 0.8;
  margin-left: 570px;
  margin-top: 120px;
}
.new-todo{
  width: 260px;
  height: 50px;
  border: none;
  position: absolute;
  margin-top: 3.5rem;
  margin-left: 3rem;
  background: #fff;
  z-index: 999;
}
.icon-cuowu{
  font-size: 25px;
  float: right;
  color: rgb(241, 244, 245);
  cursor: pointer;
}



  